<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>猿粪の日记-首页</title>
    <base th:href="@{/}">
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <link rel="stylesheet" th:href="@{/bootstrap/index/index-style.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/index/index-adaptive.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/index/banner.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/index/hover-box.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/index/menu/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/index/text-effect/linkstyles.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/my-layer-div.css}"/>
    <style id="css"></style>
    <style>
        #main_page {
            width: 100%;
            height: 100%;
            border: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="header">
    <div class="header_content">
        <div class="header-banner">
            <div class="grid__item color-11">
                <a class="link link--yaku" th:href="@{/}">
                    <span>Y</span><span>u</span><span>a</span><span>n</span>
                </a>
            </div>
        </div>
        <div class="header-opt">
            <ul class="opt_ul">
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-huiyuan"></i>会员</a></li>
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-zhuti1"></i>主题</a></li>
                <li class="opt_li extend"><a th:href="@{/tool/toolNav}"><i class="iconfont icon-xiangzi"></i>工具</a></li>
                <li class="opt_li login" id="login_btn"><a th:href="@{/loginPage}"><i
                        class="iconfont icon-dengru"></i>登入</a></li>
                <li class="opt_li online_opt" id="online_btn">
                <span class="avatar">
                    <!--http://thirdqq.qlogo.cn/g?b=oidb&k=Pf4r0mHoCWm66OovCfEJnQ&s=100&t=1531640597-->
                    <img src="" alt="头像">
                </span>
                    <span class="user_info">
                    <span class="user_item logout"><a th:href="@{/sys/myZone}"><i class="iconfont icon-zhuye1"></i>我的主页</a></span>
                    <span class="user_item logout"><a th:href="@{/sys/userInfo}"><i class="iconfont icon-shezhi"></i>设置</a></span>
                    <span class="user_item logout"><a href="javascript:void(0);"><i class="iconfont icon-bangzhu"></i>帮助</a></span>
                    <span class="user_item logout"><a th:href="@{/signOut}"><i class="iconfont icon-tuichu1"></i>退出</a></span>
                </span>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="container">
    <!--用户主要操作展示-->
    <div class="user_pocket">
        <span class="pocket_item my_diary" data-link="diary">
            <span class="item_bg"><i class="iconfont icon-icon_diary"></i></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">我的日记</span>
            </span>
        </span>
        <span class="pocket_item my_treasure" data-link="treasure">
            <span class="item_bg"><i class="iconfont icon-xiangzi1"></i></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">我的宝箱</span>
            </span>
        </span>
        <span class="pocket_item item_lo" data-link="picture">
            <span class="item_bg"><i class="iconfont icon-picture"></i></span>
            <span class="item_name">
                <span class="name_value">80</span>
                <span class="name_title">图鉴欣赏</span>
            </span>
        </span>
        <span class="pocket_item item_ho" data-link="thumb">
            <span class="item_bg"><i class="iconfont icon-zan1"></i></span>
            <span class="item_name">
                <span class="name_value">99+</span>
                <span class="name_title">为我点赞</span>
            </span>
        </span>
    </div>
    <!--日记分类导航-->
    <div class="system_briefing">
        <div class="briefing_box" id="fs_box">

            <div id="nav_ul_li">
            </div>
            <!--<span class="system_nav"><i class="iconfont icon-gou"></i>舔狗</span>
            <span class="system_nav"><i class="iconfont icon-qinggan"></i>深情</span>
            <span class="system_nav"><i class="iconfont icon-gaoxiao"></i>搞笑</span>
            <span class="system_nav"><i class="iconfont icon-ganga"></i>尴尬</span>
            <span class="system_nav"><i class="iconfont icon-crying"></i>哭泣</span>
            <span class="system_nav"><i class="iconfont icon-icon-test"></i>无聊</span>
            <span class="system_nav"><i class="iconfont icon-nvshen"></i>女神</span>
            <span class="system_nav"><i class="iconfont icon-nanshen"></i>男神</span>-->
            <!--这边可以保留改成appendBefore-->
            <!--<div id="nav_ul_li">
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-20yixia-1"></i>儿童</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xuesheng"></i>学生</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qingshaonian"></i>少年</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qingnian1"></i>青年</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-laoren-copy"></i>老人</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qingnian"></i>老实人</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-wei"></i>卑微</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-ziyuan"></i>苦逼</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qing"></i>情真意切</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qingxu"></i>情深似海</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qinggan4"></i>赤诚相待</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qinggan3"></i>生死相依</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qinglv2"></i>形影不离</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-icon-qinghua"></i>不分彼此</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-neirongli"></i>不期而然</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qingshu"></i>心心相印</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-daxiaolian"></i>谈笑风生</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku"></i>欢声笑语</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku2"></i>谈笑自若</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku1"></i>饶有风趣</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-joke"></i>忍俊不禁</li>
                    <li class="nav_li c-btn c-btn-border-line"><i
                            class="iconfont icon-mianxingtubiao_gaoxiaoxiaohuacopy"></i>喜不自胜
                    </li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku2"></i>喜形于色</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiao"></i>喜笑颜开</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kaihuaidaxiaobiaoqing"></i>笑抽风了
                    </li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiao"></i>笑里藏包</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiaoquwei"></i>啼笑皆非</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-biaoqing01"></i>苟言欢笑</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-duanzi"></i>哭笑不得</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-shuai2"></i>啼笑皆非</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-shuai"></i>无地自容</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kangshuailao"></i>进退两难</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiaolingsheng"></i>脸红心跳</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-unie653"></i>面黑耳赤</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-daxiao1"></i>笑而不语</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiao1"></i>无可奈何</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku1"></i>西湖的水</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiao1"></i>鬼哭狼嚎</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku2"></i>涕泗滂沱</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-joke"></i>如泣如诉</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-joke"></i>嚎啕大哭</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiao"></i>泣不成声</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku"></i>声泪俱下</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-xiaoku2"></i>抽噎抽咽</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian5"></i>像鬼一样</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian2"></i>百无聊赖</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian4"></i>看天发呆</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian"></i>兴味索然</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian6"></i>穷极无聊</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian1"></i>万念俱灰</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-kongxian3"></i>无所事事</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-jitu"></i>槁木死灰</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-iconmoban-copy"></i>沉鱼落雁</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nvshen01"></i>国色天香</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-qingshaonian"></i>倾国倾城</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-3dmotemeinv1"></i>出水芙蓉</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nvshen"></i>绝代佳人</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-meinv"></i>翩落惊鸿</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-biaoqing01"></i>一笑倾城</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-unie653"></i>美目盼兮</li>
                </ul>
                <ul class="nav_ul">
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nanren"></i>英俊潇洒</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nanren4"></i>玉树临风</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nanren3"></i>贱眉新墓</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nanren"></i>貌赛西门庆</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nanren1"></i>人魔狗样</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-nanren4"></i>威风潺潺</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-shuai2"></i>面如金纸</li>
                    <li class="nav_li c-btn c-btn-border-line"><i class="iconfont icon-gaoxiao2"></i>气宇轩昂</li>
                </ul>
            </div>-->
        </div>
    </div>
    <!--系统简简介及小入口-->
    <div class="system_info">
        <div class="info_left">
            <div class="left_content info_left_top">
                <span class="content_title">系统特色</span>
                <div class="slideshow">
                    <div class="slideshow-image"></div>
                    <div class="slideshow-image"></div>
                    <div class="slideshow-image"></div>
                    <div class="slideshow-image"></div>
                </div>
            </div>
            <div class="left_content info_left_bottom">
                <span id="clock"></span>
                <span class="box-shiny gift" data-link="gift">
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <div class='box'></div>
                </span>
                <span class="box-shiny info_1">
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <div class='box'></div>
                </span>
                <span class="box-shiny info_2">
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <a href="javascript:void(0);"></a>
                    <div class='box'></div>
                </span>
            </div>
        </div>
        <div class="info_right">
            <div id="box-clock">
                <span class="content_title">日情小酌<span class="switch_one"><i class="iconfont icon-shuaxin"></i>换一个</span></span>
                <div class="diary_show">
                    <span class="content">
                        今天通过群电话，我终于听到了你的声音。听你有点紧张地介绍着你们的策划，我觉得你真可爱，我希望时间就这么停住。我开着玩笑说你是妈妈的骄傲，你向我倾诉刚才有多紧张，我轻飘飘地说挺好的。你肯定以为我在安慰你。其实我真的觉得很好，但是我怦怦的心跳声让我忘记要说什么了。看来我又喜欢上你了。
                    </span>
                    <span class="signature">
                        --- 舔狗日记
                    </span>
                    <span class="signature">
                        5月23日
                    </span>
                    <span class="signature">
                        晴
                    </span>
                </div>
            </div>
            <!--网站访问Echarts-->
            <div id="box-info">
                <span class="content_title">访问UV视图</span>
                <div class="shortcut" id="visit_uv">

                </div>
            </div>
            <!--调查问卷-->
            <div id="survey">
                <span class="content_title">个人简介</span>
                <div class="qa">
                    <span class="content" style="display: block">
                        本系统由个人独立完成, 采用SpringBoot开发加Docker部署, 采用多种starter制作完成, 完全开源, 切勿商用, 如有违规, 必定追究
                    </span>
                    <span class="signature">
                        如有疑问, 请咨询QQ: <span class="linear_text">1627518680</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!--搜索栏搜索内容-->
    <div id="search_content" style="display: none;">
        <div class="content_nav">
            <div class="cur_catalog">
                <span class="level_first">首页</span>
                <i class="iconfont icon-xiayiji"></i>
                <span class="level_second">学生</span>
            </div>
            <div class="filter_condition">
                <ul class="filter_ul">
                    <li class="filter_li" data-type="create_time"><i class="iconfont icon-fabu"></i>最新发布</li>
                    <li class="filter_li" data-type="favorite"><i class="iconfont icon-shoucang"></i>收藏最多</li>
                    <li class="filter_li" data-type="likes"><i class="iconfont icon-zan"></i>点赞最多</li>
                    <li class="filter_li" data-type="views"><i class="iconfont icon-yuedu1"></i>阅读最多</li>
                </ul>
            </div>
        </div>
        <div class="content_area">
            <!--日记模板-->
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="diary_item">
                <div class="diary_cover">
                    <div class="cover">
                        <div class="cover_content">
                            <div class="title">我和玛利亚</div>
                            <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                            <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                        </div>
                        <div class="diary_info">
                            <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                            </div>
                            <div class="author">
                                <i class="iconfont icon-nanren1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sentinels">
        </div>
    </div>
</div>

<!--单页面核心-->
<div id="link_page" style="display: none;">
    <iframe id="main_page"></iframe>
</div>

<div id="footer">
    <div class="stand_by"><span class="support">本文由<a href="javascript:void(0);">兰州</a>提供技术支持</span>赣ICP备20000118号</div>
</div>
<div id="bubble">
    <div class="message">天天哇大小是打飞机</div>
</div>
<script type="text/javascript" th:src="@{https://lib.baomitu.com/jquery/3.5.0/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/layopen.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script type="text/javascript" th:src="@{https://lib.baomitu.com/echarts/3.8.5/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/index/echart.templ.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/index/index-listener.js}"></script>
<script>
    $(document).ready(function () {
        // 在触发hover效果之前加stop()可以在下次进入hover保证上次效果执行完了
        let $systemNav = $(".system_briefing");
        let $navUlLi = $("#nav_ul_li");
        $systemNav.on('mouseenter', '.system_nav', function () {
            $(this).stop().css({'color': '#1769ff', 'border-bottom': '2px solid #367dff'})
                .siblings().stop().css({'color': '#69696d', 'border-bottom': 'none'});
            $("#nav_ul_li").stop().css('display', 'block')
                .find(".nav_ul").eq($(this).index()).stop().fadeIn().siblings().stop().hide();
            $('.system_info').eq(0).stop().addClass('mh');
            $('#search_content').stop().addClass('mh');
        });

        $systemNav.on('mouseleave', function () {
            $(this).find("#nav_ul_li").css('display', 'none');
            $('.system_info').eq(0).removeClass('mh');
            $('#search_content').stop().removeClass('mh');
            $(".system_briefing .system_nav").css({'color': '#69696d', 'border-bottom': 'none'});
        });

        $navUlLi.on('mouseleave', function () {
            $(this).css('display', 'none');
            $('.system_info').eq(0).removeClass('mh');
            $('#search_content').stop().removeClass('mh');
            $(".system_briefing .system_nav").css({'color': '#69696d', 'border-bottom': 'none'});
        });


        /*子选项-小分类*/
        $navUlLi.on('click', '.nav_ul .nav_li', function () {
            let archive = $(this).data('id');
            let archiveName = $(this).text();
            updateDomByArchive(archive, archiveName);
        });

        /*大分类*/
        $systemNav.on('click', '.system_nav', function () {
            let archive = $(this).data('id');
            let archiveName = $(this).text();
            updateDomByArchive(archive, archiveName);
        });


        /*分类加排序数据显示*/
        $('.filter_li').on('click', function () {
            let archive = $('.level_second').data('id');
            let type = $(this).data("type");
            updateDomByType(archive, type);
        });


        /**
         * 归档数据
         * @param archive 归档ID
         * @param archiveName 归档名称
         */
        function updateDomByArchive(archive, archiveName) {
            PAGE = PAGE > 1 ? 1 : PAGE;
            let url = 'article/cacheGetArticle';
            ajaxPost(url, {pageIndex: PAGE, pageSize: SIZE, archive: archive}, function () {
            }, function (result) {
                if (result.code === 200) {
                    let data = result.data;
                    $('#search_content .content_area').eq(0).empty();
                    loadItem(data);
                    $('.level_second').attr('data-id', archive).text(archiveName);
                    $('#search_content').stop().removeClass('mh').css('display', 'block');
                    $("#nav_ul_li").css('display', 'none');
                    $('.system_info').css('display', 'none');
                    PAGE++;
                } else {
                    WarnAlert('请求数据失败, 请稍后重试');
                }
            }, function () {
                ErrorAlert('后台请求出错, 请稍后重试');
            });
        }


        /**
         * 归档数据
         * @param archive 归档ID
         * @param type    归档排序方式
         */
        function updateDomByType(archive, type) {
            PAGE = PAGE > 1 ? 1 : PAGE;
            let url = 'article/cacheGetArticle';
            ajaxPost(url, {pageIndex: PAGE, pageSize: SIZE, archive: archive, sortBy: type}, function () {
            }, function (result) {
                if (result.code === 200) {
                    let data = result.data;
                    $('#search_content .content_area').eq(0).empty();
                    loadItem(data);
                    PAGE++;
                } else {
                    WarnAlert('请求数据失败, 请稍后重试');
                }
            }, function () {
                ErrorAlert('后台请求出错, 请稍后重试');
            });
        }


        /*回到首页*/
        $('.level_first').on('click', function () {
            $('#search_content').css('display', 'none');
            $('.system_info').css('display', 'block');
        });


        /////////////////////////////////////////////开始监听生成文章DOM///////////////////////////////////////////////////

        let $SCA = $('#search_content .content_area');
        /*hover 进入事件*/
        $SCA.on('mouseenter', '.author', function () {
            let index = $(this).parents('.diary_item').index(), $bubble = $('#bubble');
            $('#bubble .message').eq(0).text($(this).data('value'));
            let bH = $bubble.height(),bW = $bubble.width(), count = index + 1;
            // 边框的宽度不要算山去 + scrollTop
            let offsetT = $(this).offset().top - bH - 8 - 1;
            let offsetW = $(this).offset().left - bW/2 + $(this).width()/2;
            console.log(offsetW);
            $bubble.css({
                'display': 'inline-block',
                'left': offsetW + 'px',
                'top': offsetT + 'px'
            });
        });

        /**
         * 查看详情
         */
        $SCA.on('click', '.diary_item .diary_cover .title', function () {
            window.open('anonymous/showArticle?key=' + $(this).data('id'));
        });


        /*hover 移出事件*/
        $SCA.on('mouseleave', '.author', function () {
            $('#bubble').stop().css('display', 'none');
        });


        $SCA.on('click', '.author', function () {
            window.open('anonymous/hisArticle?ring=mem' + $(this).data('id'));
        });

        /////////////////////////////////////////////监听生成文章DOM--END///////////////////////////////////////////////////


        loadUser();
        loadArchive();
        loadWebsiteUV();

        /**
         * 网站统计
         */
        function loadWebsiteUV() {
            ajaxPost("getWebUV", {}, function () {
            }, function (result) {
                result = JSONUtil.parseObj(result);
                if (result.code + '' === '200') {
                    let data = result.data;
                    let et = new ET('visit_uv', '近一周访问UV视图', data.x, data.y);
                    et.draw();
                }
            }, function (e) {
                console.log('获取数据失败, 请稍后重试!');
            });
        }

        let SORT_MAP = {}, SORT_KEY = [];

        /**
         * 加载归档
         */
        function loadArchive() {
            ajaxPost('archive/getAllArchive', {}, function () {
            }, function (result) {
                if (result.code + '' === '200') {
                    let data = result.data;
                    let fsDom = '', $nav = $('#nav_ul_li');
                    for (let i = 0; i < data.length; i++) {
                        let v = data[i];
                        if (v.fatherNode === 0) {
                            let key = v.archiveKey;
                            SORT_MAP[key] = v;
                            SORT_MAP[key]['child'] = [];
                            SORT_KEY.push(key);
                            fsDom += '<span data-id="' + key + '" class="system_nav"><i class="iconfont ' + v.icon + '"></i>' + v.name + '</span>';
                        }
                    }
                    $nav.before(fsDom);
                    for (let i = 0; i < data.length; i++) {
                        let v = data[i];
                        let fNode = v.fatherNode;
                        if (fNode !== 0) {
                            SORT_MAP[fNode]['child'].push(v);
                        }
                    }
                    let csDom = '';
                    for (let i = 0; i < SORT_KEY.length; i++) {
                        let key = SORT_KEY[i];
                        let csBox = SORT_MAP[key]['child'];
                        csDom += '<ul class="nav_ul">';
                        if (csBox.length > 0) {
                            for (let j = 0; j < csBox.length; j++) {
                                let v = csBox[j];
                                csDom += '<li class="nav_li c-btn c-btn-border-line" data-id="' + v.archiveKey + '"><i class="iconfont ' + v.icon + '"></i>' + v.name + '</li>';
                            }
                            csDom += '</ul>';
                        }
                    }
                    $nav.empty().html(csDom);
                } else {
                    layer.msg(result.message, {icon: 0});
                }
            }, function () {
                layer.msg('服务器好像出了问题, 加载数据出错', {icon: 0});
            });
        }


        // 标准方法定义
        function loadUser() {
            let url = "getToken";
            $.ajax({
                type: "post",
                url: url,
                data: {},
                dataType: 'json',
                async: 'false',
                error: function (e) {
                    // 啥也不做, 就当没有发生什么
                    $('#login_btn').css('display', 'block');
                    $('#online_btn').css('display', 'none');
                },
                success: function (result) {
                    result = JSONUtil.parseObj(result);
                    if (parseInt(result.code) === 200) {
                        let token = result.data;
                        $('#login_btn').css('display', 'none');
                        $('#online_btn').css('display', 'block').find(".avatar img").attr('src', token.avatar);
                    } else {
                        console.log("获取当前登入用户异常哦, 请检查你的参数捏!");
                    }
                }
            });
        }


        /**
         * 上面菜单栏功能
         */
        $('.user_pocket .pocket_item').on('click', function () {
            let linkUrl = $(this).data('link');
            if (linkUrl === 'thumb') {
                ajaxPost("thumbWeb", {}, function () {
                }, function (result) {
                    result = JSONUtil.parseObj(result);
                    if (result.code + '' === '200') {
                        SuccessAlert('点赞成功');
                    } else {
                        WarnAlert(result.message);
                    }
                }, function (e) {
                    ErrorAlert('请稍后重试');
                });
            }
        });

        /**
         * 抽奖系统设置, 日记管理等页面跳转
         */
        $('.system_info .info_left .left_content .box-shiny').on('click', function () {
            let linkUrl = $(this).data('link'), url = '', json = {};
            if (linkUrl === 'gift') {
                url = 'index/luckyDraw';
                json = {title: false, area: 7, url: url};
                layopen(json, "init", {});
            }
            /* else {
                            $('#container').css('display', 'none');
                            $("#link_page").css('display', 'block');
                            let iH = document.getElementById("link_page").offsetHeight - 86;
                            $('#main_page').css('height', +iH + 'px').attr('src', "sys/" + linkUrl);
                        }*/
        });
    });
</script>
<script type="text/javascript" th:src="@{/bootstrap/js/index/lib/circle_JT_min.js}"></script>
<script>
    $.circleJt({
        domId: 'clock',//必须
        radius: 85,//必须
        pbColor: '#FFF',//必需
        pbWidth: 10,//非必需
        value: 0,//必须
        totalValue: 1000,//非必需
        percentage: true,//非必需
        fontSize: 30,
        clock: true,//如果clock为真的时候，上述属性除value,totalValue,percentage均全都无效
        digitalWatch: true//以电子表形式显示
    });
</script>
</body>
</html>